<template>
  <div id="phone">
    <el-form :model="phoneForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="username">
        <el-input v-model="phoneForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="phoneForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="phoneForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input type="input" v-model="phoneForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="手机验证码" prop="verify">
        <el-input  class="phoneVerify" type="input" v-model="phoneForm.verify"></el-input>
        <el-button class="sendSms" @click="getVerify" v-if="btnShow">发送验证码</el-button>
        <el-button class="sendSms" disabled v-if="!btnShow">{{ count }}s</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="subBtn" @click="submitForm('ruleForm')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "PhoneReg",
  data(){
    const validatePass = (rule, value, callback) => {
      if (value !== this.phoneForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      btnShow: true,
      count:"",
      timer:null,
      phoneForm:{
        username:"",
        password:"",
        checkPass:"",
        phone: ""
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码'
          }
        ],
        verify: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { len:4, message: '验证码为四位', trigger: ['blur','change'] }
        ],
      }
    }
  },
  methods:{
    getVerify() {
      // 验证手机号
      if (this.checkPhone() === false) {
        return false;
      } else {
        const TIME_COUNT = 60; //更改倒计时时间
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.btnShow = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.btnShow = true;
              clearInterval(this.timer); // 清除定时器
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    checkPhone() {
      let phone = this.phoneForm.phone;
      if (!/^1[3456789]\d{9}$/.test(phone)) {
      this.$message.error("请填写正确的手机号");
      return false;
    }
  }
  }
}
</script>

<style scoped>

.sendSms{
  width: 100px;
  overflow: hidden;
}
.subBtn, .el-input{
  width: 350px;
}
.phoneVerify{
  width: 250px;
}
</style>